#mc_mod_box {
  /* background: #fff; */
  display: flex;
  flex-direction: column;
}

.layout_edit_gp_opt_w {
  width: 120px;
}

.hub_item_title_j {
  font-weight: 700;
}

/* ----------- 常规设计 -----------*/

/* ----------- 高级设计画布 -----------*/
#mc_hlever_layout_canvas {
  height: 50%;
  flex-grow: 1;
  flex: 1 1 auto;
  margin-top: 5px;
  /* border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    box-sizing: border-box; */
  position: relative;
}

#mc_hlever_layout_common_design {
  /* margin: 10px 0; */
  padding: 10px 0;
  flex-grow: 0;
  flex-shrink: 0;
}

#mc_hlever_layout_common_design .placeholder_div {
  justify-content: flex-end;
}

#mc_hlever_layout_common_design .mc_btn {
  display: inline-block;
  margin-right: 5%;
  background: none;
  border: none;
  flex-shrink: 0;
  background: #fff;
}

#mc_hlever_layout_common_design .mc_btn:hover {
  background: #c7c7c7;
}

/* 画布块里面的模组 */
/* .mc_box_mod {} */

/* .mod_hub_div {
  color: #fff;
  width: 30px;
  height: 30px;
  background: blue;
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 30px;
} */

.mod_hub_Line {
  position: absolute;
  /* 遮挡图层 */
  pointer-events: none;
  z-index: 31474;
}

/* 隐藏线 */
.mod_hub_Line.mod_line_hide {
  display: none !important;
}

/* 相同hub值的模组:背景颜色字体都继承父级相当与隐藏 */
.hub_children .mod_hub_div {
  background: inherit;
  color: inherit;
  opacity: 0;
}

/* 隐藏线状态下显示子集模块内hub值 */
.mod_line_hide.hub_children .mod_hub_div {
  background: blue;
  color: white;
  opacity: 1;
}

/* 覆盖item.css样式 */
#mc_mod_box .mc_step_add,
#mc_mod_box .mc_step_sub {
  height: 100%;
}

/* 箱体信息 */
.box_message {
  display: flex;
  justify-content: space-around;
}

#mc_hl_tiling .mc_item_wrap {
  margin-right: 5px;
}

#mc_setcard_btn_pop_menu .item_box .mc_lab.item_gp_name,
#mc_quick_connect_btn_pop_menu .item_box .mc_lab.item_gp_name,
#mc_rotate_btn_pop_menu .item_box .mc_lab.item_gp_name {
  width: 34%;
}

/* .box_connection_width #mc_quick_connect_btn_pop_menu .item_box .mc_lab.item_gp_name {
  width: 27%;
} */

#mc_quick_connect_btn_pop_menu,
#mc_setcard_btn_pop_menu {
  margin: 4px;
}

#mc_quick_connect_img div {
  margin: 6px 8px;
  background-color: rgb(255, 208, 206);
  border: 2px solid gray;

  display: inline-block;
  width: 35px;
  height: 32px;
  text-align: center;
  line-height: 32px;
}

#mc_quick_connect_img div::before {
  font-size: 24px;
}

#mc_quick_connect_img div:hover,
#mc_quick_connect_img .select_quick_connect {
  border: 2px solid red;
  background-color: yellow;
}

#mc_quick_connect_setcard_hub {
  margin-bottom: 10px;
}

#mc_hl_edit .mc_item_wrap {
  width: 150px;
}

#mc_setcard_send {
  border: 1px solid transparent;
}

#mc_setcard_hub,
#mc_quick_connect_setcard_hub {
  border: 1px dashed #888;
  display: none;
}

/* 画布大小信息及菜单栏盒子 */
.mc_msg_menu_box {
  position: absolute;
  bottom: 17px;
  /* right: 17px; */
}

/* 画布大小信息 */
.mc_item_boxs {
  display: flex;
}

#mc_canvas_msg {
  /* position: absolute;
  bottom: 17px;
  right: 17px; */
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  min-width: 120px;
  padding: 4px;
  border-radius: 2px;
  text-align: center;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#mc_menu {
  display: flex;
  /* justify-content: flex-end; */
}

#mc_menu .mc_menu_box {
  position: inherit;
  width: max-content;
}

.mc_module_size {
  cursor: default;
}

.mc_module_msg,
.mc_module_size,
.mc_canvas_size,
#mc_scale_reset_btn,
#mc_zoom_slider {
  /* padding: 0 6px; */
  padding: 0 3px;
}

.mc_canvas_size {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  flex-grow: 1;
}

#mc_scale_reset_btn {
  font-size: 20px;
  display: none;
}

#mc_scale_reset_btn:hover {
  background-color: rgba(119, 136, 153, 0.2);
}

/* 鼠标菜单 */
.menu_stack_tip {
  font-size: 14px;
}

.menu_stack_tip span {
  display: none;
}

.menu_size {
  /* display: flex; */
  display: none;
}

.menu_size_item {
  display: flex;
  padding: 2px 8px;
  width: 100px;
}

.menu_size_item .mc_lab {
  line-height: 28px;
  padding-right: 6px;
}

#mc_hl_svg_layer_line {
  position: absolute;
  pointer-events: none;
}

.main_canvas_add_xy_grid {
  top: 30px;
  left: 30px;
}

/****************************************** 坐标尺 ******************************************/
.mc_coordinate_grid {
  position: absolute;
  z-index: 123456;
  top: 0;
  box-sizing: border-box;
  transform-origin: left top;
  background-color: white;
}

#mc_coordinate_grid_head {
  left: 30px;
}

#mc_coordinate_grid_nav {
  top: 30px;
}

#mc_coorfinate_grid_all {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid grey;
  box-sizing: border-box;
  background-color: white;
  z-index: 123457;
}

/* 单个选中 */
.mc_coorfinate_grid_select_single {
  /* border: 1px solid yellow  !important; */
  background-color: #c1c1c1;
}

/* 行列选中 */
.mc_coorfinate_grid_select {
  border: 1px solid red !important;
  /* background-color: red; */
}

/* 坐标最外层 */
.mc_coorfinate_grid_wrap {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left top;
  cursor: pointer;
}

.mc_coorfinate_grid_wrap .mc_ruler_div {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border: 1px solid #666;
  box-sizing: border-box;
}

/* .mc_coorfinate_grid_wrap .mc_ruler_text { */
/* text-align: center; 
/* } */

.mc_ruler_text.nav {
  top: 50%;
  position: relative;
}

/* 正在编辑class | 正在框选 */
.mc_progress_edit {
  background-color: #ddd;
}

#mc_edit_border {
  position: absolute;
  border: 10px dashed gray;
}

.disable_mask {
  pointer-events: none;
  /* position: relative !important; */
  color: #888;
}

@media not screen and (min-width: 590px) {
  #mc_zoom_slider {
    min-width: fit-content !important;
  }

  #mc_zoom_slider .mc_slider {
    border: none;
    width: 0;
  }

  #mc_zoom_slider .mc_slider_thumb {
    display: none;
  }

  .mc_set_slider .mc_slider_min,
  .mc_set_slider .mc_slider_max {
    width: 24px;
  }
}

/* 屏幕宽度小于500px */
@media screen and (max-width: 500px) {
  .mc_item_boxs {
    flex-direction: column;
  }

  .menu_item_box:first-child {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to left, rgba(127, 127, 127, 0), rgba(88, 88, 88, 0.95)) 1 10;
    border-image-slice: 0 0 1 0;
  }
}

.mc_display_block {
  display: block !important;
}


@media screen and (max-width: 750px) {
  .icon_btn {
    min-width: 20px;
  }
}

@media screen and (max-width: 700px) {
  .icon_btn {
    min-width: 1px;
  }

  .icon_btn span {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .icon_btn {
    margin: 0;
  }
}